<template>
    <div class="ui sp-detail">
        <div class="ui" :class="{three:option.data.operateShow,two:!option.data.operateShow,'column grid':true}">
            <div class="column">
                <div class="ui divided items segment">
                    <div class="borderBottomBox" v-for="item in this.orderList[0]" >
                        <span class="ui small header">{{item.name}}</span><br>
                        <span v-if="item.map">{{item.map[item.value]}}</span>
                        <span v-else>{{item.value}}</span>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="ui divided items segment">
                    <div class="borderBottomBox" v-if="orderData.contact">
                        <span class="ui small header">联系人信息</span><br>
                        <table class="ui celled table">
                            <thead>
                            <tr>
                                <th>联系人</th>
                                <th>联系电话</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>{{orderData.contact.contact_name}}</td>
                                <td>{{orderData.contact.contact_mobile}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="borderBottomBox" v-if="orderData.identity">
                        <span class="ui small header">客人信息</span><br>
                        <table class="ui celled table"  v-for="item in orderData.identity">
                            <thead>
                            <tr>
                                <th>姓名</th>
                                <th>{{idTypeMap[item.type]}}</th>
                                <th>手机号</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>{{item.name}}</td>
                                <td>{{item.id_card}}</td>
                                <td>{{item.mobile}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="borderBottomBox" v-if="orderData.address_mobile">
                        <span class="ui small header"></span><br>
                        <table class="ui celled table">
                            <thead>
                            <tr>
                                <th>姓名</th>
                                <th>收货地址</th>
                                <th>收货电话</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>{{orderData.address_name}}</td>
                                <td>{{orderData.address}}</td>
                                <td>{{orderData.address_mobile}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="borderBottomBox" v-for="item in this.orderList[1]" >
                        <span class="ui small header">{{item.name}}</span><br>
                        <span v-if="item.map" class="description">{{item.map[item.value]}}</span>
                        <span v-else class="description">{{item.value}}</span>
                    </div>
                </div>
            </div>
			<div class="column " v-show='option.data.operateShow'>
				<div class="ui dividing header">操作</div>

					<editCom :otherEdit_mid='75' :otherEdit='true' @dosth='dosth'></editCom>
					<div class="ui dividing header">
					  <button class="ui button" @click.stop.prevent="seeLog">查看跟进日历</button>
					</div>
	                <div class="marginTop10">
	                    <!-- <button class="ui primary button" @click="auditRefund">提交</button> -->
	                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import tool from 'src/util/tool';
    import util from '_util/index';
    import logic from '_logic';
	import fselect from 'components/form/select'
	import editCom from '../../edit/editCom.vue'
    export default {
        props: ['id','option'],
		components:{fselect,editCom},
        data(){
            return {
				taillog:null,
		        log_fields:null,
		        log_titles:null,
		        new_detail_id:false,
		        lastOne:null,
                idTypeMap: {
                    1: "身份证", 2: "驾驶证", 3: "军官证", 4: "护照"
                },
                orderList: [{
                    order_id: {name: 'ID', value: ''},
                    tail_status: {
                        name: '跟进状态', value: '', map: {
                            1: '未支付',
                            10: '已支付待发货',
                            20: ' 资源待确认',
                            22: ' 资源已确认',
                            25: ' 直连商品出票失败',
                            30: ' 供应商已确认',
                            35: '连商品下单成功',
                            50: ' 已发货待分成',
                            55: ' 直连商品发货成功',
                            70: ' 已完成',
                            80: ' 已退单',
                            81: ' 线下退单',
                            85: ' 部分退单'
                        }
                    },
                    sp_order_num: {name: '订单号', value: ""},
                    pname: {name: '商品', value: ''},
                    attr_name: {name: '规格', value: ''},
                    pnum: {name: '数量', value: ''},
                    pay_money: {name: '支付金额', value: ''},
                    pay_platform: {
                        name: '支付平台', value: '', map: {
                            1: '微信', 2: '支付宝', 3: '余额支付', 4: '授信支付'
                        }
                    },
                    pay_status: {
                        name: '状态', value: '', map: {
                            0: '未支付', 1: '已支付', 2: '已完成', 3: '已退款'
                        }
                    },
                    create_dt: {name: '创建时间', value: ''},
                },{
                    update_time: {name: '更新时间', value: "0000-00-00"},
                    target_time: {name: '出行时间', value: "0000-00-00"},
                    remark: {name: '备注', value: ''},
                },
                ],
                orderData: {}
            }
        },
        computed: {
        },
        watch:{
            id(){
                this.getOrderData()
            }
        },
        created(){
            this.getOrderData()
			$('.ui.dropdown').dropdown()
        },
        methods: {
			seeLog(){
				let _this = this;
			  let fields = this.log_fields;
			  let titles = this.log_titles;
			  let vals=this.taillog;
			  let info = {
				_id:_this.id,
		//        refresh:true,
				refresh:false,
				rs:{
				  many_line:true,
				  title:'跟进日志',
				  vals,titles,fields
				}
			  };
			  logic.detail.show_click_see(this, info);
			},
			dosth(vo){
			  let url = tool.getApi(this, 'Taillog','insert');
			  let param = {
				detail_id:this.id,
				status:vo.status,
				remark:vo.remark
			  };
			  util.http.SR(this, url, param, '跟进操作成功', (rs) => {
				logic.list.refreshListData(this);
				this.getTaillog();
			  });
		  },
			getTaillog(){
		      let url = tool.getApi(this, 'Listget','getTailInfo');
		      let param = {
		        detail_id:this.id
		      };
		      util.getDataCom(this, url, param, (rs) => {
		        this.taillog = rs.logs;
		        this.log_fields=rs.fields;
		        this.log_titles=rs.titles;

		        this.lastOne = rs.last;

		        this.new_detail_id=true;

		        util.store.commit(this,'set_otherEdit_op', 'update');
		        util.store.commit(this,'setOtherEditVo', this.lastOne||{});
		      });
		    },
            getOrderData(){
                let url = tool.getApi(this,'Trodetail','read');
                let parm = {
                    id:this.id
                };
                util.http.getDataCom(this, url, parm, (rs) => {
                    this.orderData = rs;
                    this.orderList.forEach(list=>{
                        Object.keys(list).forEach(key => {
                            list[key].value = this.orderData[key]
                        });
                    })
                })
				this.getTaillog()
            }
        }
    }
</script>

<style lang="less" rel="stylesheet/less" scoped>
    .sp-detail {
        .borderBottomBox {
            border-bottom: 1px solid #cdcdcd;
            margin-bottom: 5px;
            padding-bottom: 5px;
        }
    }
</style>
